<template>
  <a-modal :open="open" width="640px" title="候诊区子屏" centered ok-text="保存" @ok="onOk" @cancel="onCancel">
    <BaseTable :loading="loading" :columns="columns" :data-source="tableData" bordered :pagination="pagination">
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'xh'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'screenAddr'">
          <EditCell title="子屏显地址端口">
            <a-input v-model:value="record.screenAddr" placeholder="请输入" @change="record.isChange = true" @blur="record.isChange && onCellBlur(record)" />
          </EditCell>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <BaseButton confirm-text="确认删除？" type="link" danger size="small" @click="onClickDel(record)">删除</BaseButton>
        </template>
      </template>
      <template #footer>
        <div class="text-center sticky bottom-0">
          <a-button @click="addRow()"> 新增一条 </a-button>
        </div>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const emit = defineEmits(['update:open', 'update:value', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const columns = ref([
  {
    title: '序号',
    dataIndex: 'xh',
    width: 60
  },
  {
    title: '子屏编号',
    dataIndex: 'id',
    width: 160
  },
  {
    title: '子屏显地址端口',
    dataIndex: 'screenAddr'
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100
  }
])
const tableData = ref([])

watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.rowData?.id) {
        getData()
      }
    }
  }
)
const getData = async () => {
  const res = await post('/outp/dictRegion/getRegionChildList', { regionId: props.rowData.id })
  if (res.code !== 0) return message.error(res.msg || '保存失败')
  tableData.value = res.data || []
}
const saveTable = async (row, flag) => {
  const res = await post('/outp/dictRegion/doSaveRegionChild', { ...row, regionId: props.rowData.id })
  if (res.code !== 0) return message.error(res.msg || '保存失败')
  if (flag) {
    message.success(res.msg || '保存成功')
    emit('success')
    onCancel()
  }
}
const onCellBlur = (row) => {
  row.id && saveTable(row, true)
}
const onOk = () => {
  const saveRows = tableData.value.filter((item) => {
    return item.isNew && item.screenAddr
  })
  if (!saveRows || saveRows.length <= 0) return message.warning('暂无需要保存的内容')
  saveRows.forEach((item, index) => {
    if (saveRows.length - 1 === index) {
      saveTable(item, true)
    } else {
      saveTable(item, false)
    }
  })
}
const onClickDel = async (row) => {
  const res = await post('/outp/dictRegion/doDelRegionChild', { regionId: props.rowData.id, id: row.id })
  if (res.code !== 0) return message.error(res.msg || '删除失败')
  message.success(res.msg || '删除成功')
  getData()
}
const addRow = () => {
  tableData.value.push({
    isNew: true,
    screenAddr: ''
  })
}

const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped></style>
